<template>
    <div class="main">
        <headNav title="团队架构" :isHome="false"></headNav>
        <div class="container">
            <div class="username">
                {{teamObj.agentName}}
            </div>
            <div class="form-item">
                <span class="label">上级：</span>
                <span>{{teamObj.partner ? teamObj.partner.agentName: '-'}}</span>
            </div>
            <div class="form-item">
                <span class="label">归属团队：</span>
                <span>{{teamObj.teamList ? teamObj.teamNames.join() : '-'}}</span>
            </div>
            <div class="big-form-item">
                <span class="label">发展团队：</span>
                <p class="whoNav">
                    <span class="normal active"></span>
                    <span class="whoname">
                        合伙人
                    </span>
                    <span class="normal"></span>
                    <span class="whoname">
                        代理商
                    </span>
                </p>
            </div>
            <div class="treeBox" v-if="JSON.stringify(data) != '{}' ">
                <vue2-org-tree
                    name="test"
                    :data="data"
                    :props="{label: 'agentName', children: 'children', expand: 'expand'}"
                    :horizontal="horizontal"
                    :collapsable="collapsable"
                    :labelClassName='labelClassName'
                  
                    :renderContent="renderContent"
                    @on-expand="onExpand"
                    @on-node-click="onNodeClick"
                />
            </div>
        </div>
        <bottomNav :index="3"></bottomNav>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav.vue'
import bottomNav from '@/components/bottomNav/bottomNav.vue'
import Vue2OrgTree from '@/components/org-tree'
import colorUtil from '@/util/colorUtil'
export default {
    components: {
        Vue2OrgTree, bottomNav, headNav
    },
     data () {
        return {
            data: {},
            horizontal: false,
            collapsable: false,
            teamObj: {
                teamNames: [],
                treeVO: []
            },
             colorMap: {},
        }
    },
    mounted () {
        this.getData()
    },
    methods: {
        renderContent (h, data) {
            let circle
            let color 
            let teamId = data.teamId
            if (!teamId) {
                teamId = '0'
            }
            
            if (this.colorMap[teamId]) {
                color = this.colorMap[teamId]
            } else {
                color = colorUtil.getColor()
                this.colorMap[teamId] = color
            }

            
            let lable = h(
                'div',
                 {
                    style: {}
                },
                data.agentName
            )
            
            let child = [lable]
            
            let dom 
           
            if (data.agentType == 0) {
                 dom = h(
                    'div',
                    {
                        style: {border: '1px solid #4B7BF9', color:'#4B7BF9',padding:'0.1rem', borderRadius:'0.1rem'}
                    },
                    child
                )
            } else {
                 dom = h(
                    'div',
                    {
                        style: {background: color, color:'#fff',padding:'0.1rem', borderRadius:'0.1rem'}
                    },
                    child
                )
            }
           
            
            return dom
        },
       labelClassName (data) {
          
        //   if (data.agentType === 0) {
        //       return 'org-tree-node-label-inner-2'
        //   } else {
        //        return 'org-tree-node-label-inner'
        //   }
       },
        onExpand(e, data) {

        },
        //点击选项执行的方法，可以用于跳转到其他链接，注意一定要写协议头
        onNodeClick(e, data) {
            // console.log(data);
        },
        getData () {
            this.$store.dispatch('teamClock/GetTeamList').then(
                res => {
                    if (res.data) {
                        this.teamObj = res.data
                        var arr = []
                        if (res.data.teamList) {
                            res.data.teamList.forEach(item => {
                                arr.push(item.agentName)
                            })
                        }
                        this.teamObj.teamNames = arr
                        this.data = res.data.treeVO
                    }
                }
            )
        },
        findDep(node = [],arr=[]) {
            for(let item of node) {
                arr.push({a: item.a, b: item.b})
                //将c对象存进数组，便于递归遍历
                let parentArr = []
                if (item.children) parentArr.push(item.children)
                if (parentArr && parentArr.length) this.findDep(parentArr,arr)
            }
            return arr
        }

    }
}
</script>
<style scoped>
    .main{
        height: 100%;
        background: #fff;
    }
    .container{
        background: #fff;
    }
    .treeBox{
        width: 100%;
        overflow: auto;
        text-align: center;
    }
    .teamName{
        height: 0.86rem;
        line-height: 0.86rem;
        text-align: center;
        font-size: 0.32rem;
        font-weight: bold;
        border-bottom: 0.01rem solid #eee;
    }
    .username{
        height: 1.02rem;
        line-height: 1.02rem;
        font-size: 0.32rem;
        font-weight: bold;
        border-bottom: 0.01rem solid #eee;
        padding: 0 0.3rem;
    }
    .form-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.35rem 0.3rem;
        border-bottom: 0.01rem solid #eee;
        font-size: 0.28rem;
    }
    .label{
        color: #666;
        font-size: 0.28rem;
        min-width: 2rem;
    }
    .big-form-item{
        color: #666;
        padding: 0.3rem;
    }
    .whoNav{
        color: #666;
        font-size: 0.22rem;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .normal{
        display: inline-block;
        width: 0.26rem;
        height: 0.18rem;
        background: rgba(255, 148, 53, 0);
        border: 0.02rem solid #4B7BF9;
        border-radius:0.05rem;
        margin-right: 0.08rem;
    }
    .whoNav .whoname:nth-child(2){
        margin-right: 0.28rem;
    }
    .active{
        background: #4B7BF9;
    }
</style>
